﻿@page
@model zzzz.Xncf.CommunityManagement.Areas.Admin.Pages.CommunityUserInfo.Index
@{
    ViewData["Title"] = "社区信息管理"; Layout = "_Layout_Vue";
}
@section breadcrumbs {
    <el-breadcrumb-item>疫苗接种人员管理</el-breadcrumb-item>
    <el-breadcrumb-item>社区人员管理</el-breadcrumb-item>
    <el-breadcrumb-item>社区人员列表</el-breadcrumb-item>
}

<div id="app">
    <el-container>
        <el-header class="module-header">
            <span class="start-title"> <i class="fa fa-dot-circle-o"></i>&nbsp;<span class="module-header-v">社区人员管理 - 首页</span></span>
        </el-header>
        
        <el-main>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column align="center" label="社区名称"><template slot-scope="scope">中关村社区</template></el-table-column>
                <el-table-column align="center" label="人员编号"><template slot-scope="scope">{{ scope.row.no}}</template></el-table-column>
                <el-table-column align="center" label="姓名"><template slot-scope="scope">{{ scope.row.name}}</template></el-table-column>
                <el-table-column align="center" label="生日"><template slot-scope="scope">{{ scope.row.birthday}}</template></el-table-column>
                <el-table-column align="center" label="添加时间"><template slot-scope="scope">{{formaTableTime(scope.row.createTime)}}</template></el-table-column>
                <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini"
                               type="primary"
                               v-has="['role-edit']"
                               @@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-popconfirm placement="top" title="确认删除此角色吗？" v-has="['role-delete']" @@on-confirm="handleDelete(scope.$index, scope.row)">
                        <el-button size="mini" type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</div>


@section scripts{
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    paginationQuery: {
                        total: 5
                    },
                    listQuery: {
                        pageIndex: 1,
                        pageSize: 20,
                        roleName: '',
                        orderField: ''
                    },
                    tableData: []
                };
            },
            created: function () {
                this.getList();
            },
            methods: {
                getList() {
                    let { pageIndex, pageSize, roleName, orderField } = this.listQuery;
                    service.get(`/Admin/CommunityUserInfo/Index?handler=List`).then(res => {
                        this.tableData = res.data.data.list;
                        this.paginationQuery.total = res.data.data.totalCount;
                    });
                }
            }
        });
    </script>
}